<template>
  <BasicContainer>
    <ElRow :span="24">
      <ElCol :md="4">
        <div class="tree-position">
          <FyTree :option="treeOption" :data="treeData" @node-click="nodeClick" />
        </div>
      </ElCol>
      <ElCol :md="20">
        <ElTabs v-model="type" @tab-click="handleClick">
          <ElTabPane name="1">
            <template #label>
              <span><i class="el-icon-star-off"></i> 关注时回复</span>
            </template>
            <FyCurd
              ref="crud"
              :page.sync="page"
              :data="tableData"
              :permission="permissionList"
              :table-loading="tableLoading"
              :option="tableOption1"
              @refresh-change="refreshChange">
              <template #menuLeft>
                <div v-if="tableData.length <= 0" class="add_but">
                  <ElButton type="primary" size="mini" @click="handleAdd"> 新 增 </ElButton>
                </div>
              </template>
              <template #menu="scope">
                <ElButton type="text" icon="el-icon-edit" size="small" plain @click="handleEdit(scope.row)">
                  编辑
                </ElButton>
                <ElButton type="text" icon="el-icon-delete" size="small" plain @click="handleDel(scope.row)">
                  删除
                </ElButton>
              </template>
            </FyCurd>
          </ElTabPane>
          <ElTabPane name="2">
            <template #label>
              <span><i class="el-icon-chat-line-round"></i> 消息回复</span>
            </template>
            <FyCurd
              ref="crud"
              :page.sync="page"
              :data="tableData"
              :permission="permissionList"
              :table-loading="tableLoading"
              :option="tableOption2"
              @refresh-change="refreshChange"
              @sort-change="sortChange">
              <template #menuLeft>
                <div class="add_but">
                  <ElButton type="primary" size="mini" @click="handleAdd"> 新 增 </ElButton>
                </div>
              </template>
              <template #menu="scope">
                <ElButton type="text" icon="el-icon-edit" size="small" plain @click="handleEdit(scope.row)">
                  编辑
                </ElButton>
                <ElButton type="text" icon="el-icon-delete" size="small" plain @click="handleDel(scope.row)">
                  删除
                </ElButton>
              </template>
            </FyCurd>
          </ElTabPane>
          <ElTabPane name="3">
            <template #label>
              <span><i class="el-icon-news"></i> 关键词回复</span>
            </template>
            <FyCurd
              ref="crud"
              :page.sync="page"
              :data="tableData"
              :permission="permissionList"
              :table-loading="tableLoading"
              :option="tableOption3"
              @refresh-change="refreshChange"
              @sort-change="sortChange"
              @search-change="searchChange">
              <template #menuLeft>
                <div class="add_but">
                  <ElButton v-if="permissions.mp_wxautoreply_add" type="primary" size="mini" @click="handleAdd">
                    新 增
                  </ElButton>
                </div>
              </template>
              <template #menu="scope">
                <ElButton
                  v-if="permissions.mp_wxautoreply_edit"
                  type="text"
                  icon="el-icon-edit"
                  size="small"
                  plain
                  @click="handleEdit(scope.row)">
                  编辑
                </ElButton>
                <ElButton
                  v-if="permissions.mp_wxautoreply_del"
                  type="text"
                  icon="el-icon-delete"
                  size="small"
                  plain
                  @click="handleDel(scope.row)">
                  删除
                </ElButton>
              </template>
            </FyCurd>
          </ElTabPane>
        </ElTabs>
        <ElementDialog
          :title="handleType === 'add' ? '新增回复消息' : '修改回复消息'"
          :visible.sync="dialog1Visible"
          width="50%">
          <ElForm label-width="100px">
            <ElFormItem v-if="type === '2'" label="请求消息类型">
              <ElSelect v-model="objData.reqType" placeholder="请选择">
                <template v-if="item.value !== 'event'"></template>
                <ElOption
                  v-for="item in dictData.get('wx_req_type')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled" />
              </ElSelect>
            </ElFormItem>
            <ElFormItem v-if="type === '3'" label="匹配类型">
              <ElSelect v-model="objData.repMate" placeholder="请选择" style="width: 100px">
                <ElOption
                  v-for="item in dictData.get('wx_rep_mate')"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value" />
              </ElSelect>
            </ElFormItem>
            <ElFormItem v-if="type === '3'" label="关键词">
              <ElInput v-model="objData.reqKey" placeholder="请输入内容" clearable />
            </ElFormItem>
            <ElFormItem label="回复消息">
              <WxReplySelect v-if="hackResetWxReplySelect" :obj-data="objData" />
            </ElFormItem>
          </ElForm>
          <template #footer>
            <span class="dialog-footer">
              <ElButton @click="dialog1Visible = false">取 消</ElButton>
              <ElButton v-if="permissions.mp_wxautoreply_add" type="primary" @click="handleSubmit">确 定</ElButton>
            </span>
          </template>
        </ElementDialog>
      </ElCol>
    </ElRow>
  </BasicContainer>
</template>

<script>
  import { addObj, delObj, getPage, putObj } from '@/api/mp/wx-auto-reply'
  import { fetchAccountList } from '@/api/mp/wx-account'
  import { tableOption1, tableOption2, tableOption3 } from '@/const/crud/mp/wx-auto-reply'
  import { mapState } from 'vuex'

  export default {
    name: 'WxAutoReply',
    data() {
      return {
        treeOption: {
          nodeKey: 'id',
          addBtn: false,
          menu: false,
          props: {
            labelText: '标题',
            label: 'name',
            value: 'appid',
            children: 'children'
          }
        },
        treeData: [],
        checkAppId: undefined,
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20, // 每页显示多少条
          ascs: [], // 升序字段
          descs: [] // 降序字段
        },
        paramsSearch: {},
        tableLoading: false,
        tableOption1,
        tableOption2,
        tableOption3,
        dialog1Visible: false,
        type: '1', // 类型（1、关注时回复；2、消息回复；3、关键词回复）
        objData: {
          repType: 'text',
          appId: undefined
        },
        handleType: null,
        dictData: new Map(),
        hackResetWxReplySelect: false
      }
    },
    computed: {
      ...mapState('user', ['permissions']),
      permissionList() {
        return {
          addBtn: this.$isEmpty(this.permissions.mp_wxautoreply_add, false),
          delBtn: this.$isEmpty(this.permissions.mp_wxautoreply_del, false),
          editBtn: this.$isEmpty(this.permissions.mp_wxautoreply_edit, false)
        }
      }
    },
    created() {
      this.getAccountList()

      this.getPage(this.page)
      this.dictData.set('wx_rep_mate', [
        {
          value: '1',
          label: '全匹配'
        },
        {
          value: '2',
          label: '半匹配'
        }
      ])
      this.dictData.set('wx_req_type', [
        {
          value: 'text',
          label: '文本'
        },
        {
          value: 'image',
          label: '图片'
        },
        {
          value: 'voice',
          label: '语音'
        },
        {
          value: 'video',
          label: '视频'
        },
        {
          value: 'shortvideo',
          label: '小视频'
        },
        {
          value: 'location',
          label: '地理位置'
        },
        {
          value: 'link',
          label: '链接消息'
        },
        {
          value: 'event',
          label: '事件推送'
        }
      ])
    },
    methods: {
      nodeClick(data) {
        this.checkAppId = data.appid
        this.getPage(this.page)
      },
      getAccountList() {
        fetchAccountList().then(response => {
          this.treeData = response.data.data
          // 默认选中第一个
          if (this.treeData.length > 0) {
            this.nodeClick(this.treeData[0])
          }
        })
      },
      handleAdd() {
        this.hackResetWxReplySelect = false // 销毁组件
        this.$nextTick(() => {
          this.hackResetWxReplySelect = true // 重建组件
        })
        this.handleType = 'add'
        this.dialog1Visible = true
        this.objData = {
          repType: 'text',
          appId: this.checkAppId
        }
      },
      handleEdit(row) {
        this.hackResetWxReplySelect = false // 销毁组件
        this.$nextTick(() => {
          this.hackResetWxReplySelect = true // 重建组件
        })
        this.handleType = 'edit'
        this.dialog1Visible = true

        if (row.content && typeof row.content === 'string') {
          // console.log(row.content)
          row.content = JSON.parse(row.content)
        }
        this.objData = Object.assign({}, row)
      },
      handleClick(tab, event) {
        this.tableData = []
        this.page.currentPage = 1
        this.type = tab.name
        this.getPage(this.page)
      },
      searchChange(params, done) {
        params = this.filterForm(params)
        this.paramsSearch = params
        this.page.currentPage = 1
        this.getPage(this.page, params)
        done()
      },
      sortChange(val) {
        const prop = val.prop ? val.prop.replace(/([A-Z])/g, '_$1').toLowerCase() : ''
        if (val.order === 'ascending') {
          //eslint-disable-line
          this.page.descs = []
          this.page.ascs = prop
        } else if (val.order === 'descending') {
          //eslint-disable-line
          this.page.ascs = []
          this.page.descs = prop
        } else {
          this.page.ascs = []
          this.page.descs = []
        }
        this.getPage(this.page)
      },
      getPage(page, params) {
        this.tableLoading = true
        getPage(
          Object.assign(
            {
              current: page.currentPage,
              size: page.pageSize,
              descs: this.page.descs,
              ascs: this.page.ascs,
              type: this.type,
              appId: this.checkAppId
            },
            params,
            this.paramsSearch
          )
        )
          .then(response => {
            this.tableData = response.data.data.records
            this.page.total = response.data.data.total
            this.page.currentPage = page.currentPage
            this.page.pageSize = page.pageSize
            this.tableLoading = false
            if (this.type === '2') {
              const wxReqType = this.dictData.get('wx_req_type')
              for (let i = 0; i < wxReqType.length; i++) {
                wxReqType[i].disabled = false
                for (let j = 0; j < this.tableData.length; j++) {
                  if (wxReqType[i].value === this.tableData[j].reqType) {
                    //eslint-disable-line
                    wxReqType[i].disabled = true
                  }
                }
              }
            }
          })
          .catch(() => {
            this.tableLoading = false
          })
      },
      handleDel: function (row, index) {
        this.$confirm('是否确认删除此数据', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            return delObj(row.id)
          })
          .then(data => {
            this.$message.success({ showClose: true, message: '删除成功' })
            this.getPage(this.page)
          })
      },
      handleSubmit(row) {
        if (this.objData.repType === 'news') {
          this.objData.content = JSON.stringify(this.objData.content)
        }
        if (this.handleType === 'add') {
          //eslint-disable-line
          addObj(
            Object.assign(
              {
                type: this.type,
                appId: this.checkAppId
              },
              this.objData
            )
          ).then(data => {
            this.$message.success('添加成功')
            this.getPage(this.page)
            this.dialog1Visible = false
          })
        }
        if (this.handleType === 'edit') {
          //eslint-disable-line
          putObj(this.objData).then(data => {
            this.$message.success('修改成功')
            this.getPage(this.page)
            this.dialog1Visible = false
          })
        }
      },
      /**
       * @title 数据更新
       * @param row 为当前的数据
       * @param index 为当前更新数据的行数
       * @param done 为表单关闭函数
       *
       **/
      handleUpdate: function (row, index, done, loading) {
        putObj(row)
          .then(data => {
            this.$message({
              showClose: true,
              message: '修改成功',
              type: 'success'
            })
            done()
            this.getPage(this.page)
          })
          .catch(() => {
            loading()
          })
      },
      /**
       * @title 数据添加
       *
       **/
      handleSave: function (row, done, loading) {
        addObj(
          Object.assign(
            {
              type: this.type
            },
            this.objData
          )
        )
          .then(data => {
            this.$message.success('添加成功')
            this.getPage(this.page)
            this.dialog1Visible = false
          })
          .catch(() => {
            done()
          })
      },
      /**
       * 刷新回调
       */
      refreshChange(page) {
        this.objData = {
          repType: 'text'
        }
        this.getPage(page)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tree-position {
    margin: 12px 20px 0 0;
  }
</style>
